<script lang="ts">
import { showToast } from "vant"
import { defineComponent, ref } from "vue";
import type { SlideVerifyInstance } from "vue3-slide-verify";
import SlideVerify from "vue3-slide-verify";
import "vue3-slide-verify/dist/style.css";


export default defineComponent({
    components: { SlideVerify },
    
    setup(props,context) {
        const msg = ref("");
        const block = ref<SlideVerifyInstance>();
    
        const onAgain = () => {
            msg.value = "检测到非人为操作的哦！ try again";
            // 刷新
            block.value?.refresh();
        };
    
        const onSuccess = (times: number) => {
            msg.value = `验证成功, 耗时${(times / 1000).toFixed(1)}s`;
            let show = false
            context.emit('showBox',show)
            showToast('验证成功')
        };
    
        const onFail = () => {
            msg.value = "验证不通过";
            showToast('验证失败')
        };
    
        const onRefresh = () => {
            msg.value = "点击了刷新小图标";
        };
    
        const handleClick = () => {
            // 刷新
            block.value?.refresh();
            msg.value = "";
        };
    
        return {
            block,
            msg,
            text: "向右滑动->",
            accuracy: 5,
            onAgain,
            onSuccess,
            onFail,
            onRefresh,
            handleClick,
        };
    },
});
</script>

<template>
    <div>
        <slide-verify
            ref="block"
            :slider-text="text"
            :accuracy="accuracy"
            @again="onAgain"
            @success="onSuccess"
            @fail="onFail"
            @refresh="onRefresh"
        ></slide-verify>
        <!-- <div>{{ msg }}</div> -->
    </div>
</template>  